<template>
  <van-search v-model="searchText" placeholder="请输入搜索关键词" input-align="center" />
  <van-dropdown-menu>
    <van-dropdown-item v-model="value1" :options="option1" />
    <van-dropdown-item v-model="value2" :options="option2" />
  </van-dropdown-menu>

  <div>
    <van-grid :border="false" :column-num="2">
      <van-grid-item v-for="item in dataList" :key="item.id">
        <div class="item" @click="toDetail(item.id)">
          <van-image :src="item.img" width="100%" height="100px" />
          <div class="item-info">
            <span>{{ item.name.substring(0, 10) }}</span>
            <span>{{ item.price }}</span>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { ref } from 'vue'

let searchText = ref('')

const dataList = ref([
  { id: 1, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', name: '苹果', price: '￥100', num: 1 },
  { id: 2, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', name: '苹果', price: '￥100', num: 1 },
  { id: 3, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', name: '苹果', price: '￥100', num: 1 },
  { id: 4, img: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg', name: '苹果', price: '￥100', num: 1 },
])

const value1 = ref(0)
const value2 = ref('a')
const option1 = [
  { text: '全部商品', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
]
const option2 = [
  { text: '默认排序', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' },
]

const result = ref('')

const toDetail = (id) => {
  console.log(id)
}
</script>

<style scoped>
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.item-info {
  text-align: center;
  margin-top: 10px;
}
</style>
